import React from 'react'
import {message, Modal, Table} from 'antd';
import { Switch } from 'antd';
import { Button } from 'antd';
import AddCategory from "../categoryManage/AddCategory";
import ModifyCategory from "../categoryManage/ModifyCategory";
import DeleteCategory from "../categoryManage/DeleteCategory";
import Axios from "axios";
import allApi from "../../../api/api.config";

const columns = [
    {
        title: '排序',
        dataIndex: 'clas_sort',
    },
    {
        title: '分类名称',
        dataIndex: 'clas_name',
    },
    {
        title: '是否显示',
        dataIndex: 'clas_state',
    },
    {
        title: '操作',
        dataIndex: 'Operate',
    },
];

class CategoryManage extends React.Component {
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };

    constructor(props) {
        super(props);
        this.state = {first:true}
    }

    componentDidMount(e) {
        Axios.post("api/goods/categoryManage",{
            // clas_sort:e.clas_sort,
            // clas_name:e.clas_name,
            // clas_state:e.clas_state,
        }).then((res)=>{
            if (res.data.code===200){
                this.setState({
                    // data:res.data.data,
                    first:false
                })
            }else{
                this.error('加载出错')
                this.setState({
                    // data:res.data.data,
                    first:false
                })
            }
        }).catch((err)=>{
            console.log(err);
            this.setState({
                // data:res.data.data,
                first:false
            })
        })
    }

    state = { visible: false };

    showModal = () => {
        this.setState({
            visible1: true,
            visible2: false,
            visible3: false,
        });
    };
    showModal2 = () => {
        this.setState({
            visible2: true,
            visible1: false,
            visible3: false,
        });
    };
    showModal3 = () => {
        this.setState({
            visible3: true,
            visible1: false,
            visible2: false,
        });
    };

    //添加
    handleOk = e => {
        console.log(e);
        message.success('添加成功');
        this.setState({
            visible1: false,
        });
        Axios.post(allApi.goodsApi.addCategory,{
            clas_sort:e.clas_sort,
            clas_name:e.clas_name,
            clas_state:e.clas_state,
            classify:e.classify
        }).then((res)=> {
            if (res.data.code===200){
                this.success('添加成功')
            }else {
                this.error('加载出错,请联系管理员')
            }
        }).catch((err)=> {
            console.log(err);
        })
    };

    //修改
    handleOk2 = e => {
        console.log(e);
        message.success('修改成功');
        this.setState({
            visible2: false,
        });
        Axios.post(allApi.goodsApi.updateCategory,{
            clas_sort:e.clas_sort,
            clas_name:e.clas_name,
            clas_state:e.clas_state,
            classify:e.classify
        }).then((res)=> {
            if(res.data.code===200) {
                this.success('修改成功')
            }else {
                this.error('加载出错,请联系管理员')
            }
        }).catch((err)=> {
            console.log(err);
        })
    };

    //删除
    handleOk3 = e => {
        console.log(e);
        message.success('删除成功');
        this.setState({
            visible3: false,
        });
        Axios.post(allApi.goodsApi.deleteCategory,{
            id:e.id,
        }).then((res)=> {
            if(res.data.code===200) {
                this.success('删除成功')
            }else {
                this.error('加载出错,请联系管理员')
            }
        }).catch((err)=> {
            console.log(err);
        })
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible1: false,
        });
    };
    handleCancel2 = e => {
        console.log(e);
        this.setState({
            visible2: false,
        });
    };
    handleCancel3 = e => {
        console.log(e);
        this.setState({
            visible3: false,
        });
    };

    render() {
        const data = [];
        for (let i = 0; i < 46; i++) {
            data.push({
                key: i,
                clas_sort: `${i}`,
                clas_name: `水果生鲜 ${i}`,
                clas_state: <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />,
                Operate: <div>
                    <Button type="primary" ghost onClick={this.showModal}>
                        添加
                    </Button>
                    <Button type="primary" ghost onClick={this.showModal2}>
                        修改
                    </Button>
                    <Button type="primary" ghost onClick={this.showModal3}>
                        删除
                    </Button>
                </div>
            });
        }
        return (
            <div>
                <Table loading={{spinning:this.state.first}} columns={columns} dataSource={data} />
                <Modal
                    title="添加分类"
                    visible={this.state.visible1}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    cancelText="取消"
                    width={800}
                >
                    <AddCategory></AddCategory>
                </Modal>
                <Modal
                    title="修改分类"
                    visible={this.state.visible2}
                    onOk={this.handleOk2}
                    onCancel={this.handleCancel2}
                    okText="确认"
                    cancelText="取消"
                    width={500}
                >
                    <ModifyCategory></ModifyCategory>
                </Modal>
                <Modal
                    title="删除分类"
                    visible={this.state.visible3}
                    onOk={this.handleOk3}
                    onCancel={this.handleCancel3}
                    okText="确认"
                    cancelText="取消"
                    width={500}
                >
                    <DeleteCategory></DeleteCategory>
                </Modal>
            </div>
        )
    }
}
export {CategoryManage as default}